<template>
  <div class="animated fadeIn">
    <!-- 车队列表 2018/3/7 10:50 zhangQ -->
    <Row>
      <i-col :md="24">
        <div>
          <div id="container" style="margin-bottom:10px;">
            <Button type="primary" size="large" icon="ios-cloud-upload-outline" id='pickfiles' @click="bindFleet"
                    style="padding-bottom:5px;">绑定车队
            </Button>
            <!--
            <Progress :percent="progresscount" :status="progresstatus" style="width=90%;vertical-align:middle" v-if="progresshow">
                <Icon type="checkmark-circled" v-if="progresscount==100"></Icon>
                <span v-if="progresscount===100">上传成功</span>
                <Icon type="close-circled" v-if="progresstatus==='wrong'"></Icon>
                <span v-if="progresstatus==='wrong'">上传失败</span>
                <span style="position:absolute;left:50%;top:-5px;" v-if="progresscount!==0&&progresscount!=100">{{progressspeed}}</span>
            </Progress>
          -->
          </div>
          <div style="position:relative;">
            <Table :columns="fleetColumn" :data="fleet_list" ref="table"></Table>
            <div style="position:absolute;top:0px;width:100%;height:100%;display: flex;
                                          align-items: center;
                                          justify-content: center;background: rgba(210, 216, 222, 0.5);"
                 v-if="list_loadding">
              <Spin size="large"></Spin>
              <h6 style="color:#2d8cf0;margin-top:10px;">正在获取数据...</h6>
            </div>
          </div>

          <!--
          <Button type="primary" size="large" @click="exportData(1)">
            <Icon type="ios-download-outline"></Icon>
            导出原始数据
          </Button>
          <Button type="primary" size="large" @click="exportData(2)">
            <Icon type="ios-download-outline"></Icon>
            导出排序和过滤后的数据
          </Button>
        -->
        </div>


      </i-col>
      <i-col :md="12">
      </i-col>
    </Row>
    <Modal v-model="bindFleetModal" title="绑定车队" @on-ok="submitBind">
      <Form ref="formItem" :model="formItem" inline>
        <FormItem prop="loginName">
          <Select v-model="formItem.loginName" filterable style="width: 300px">
            <Option v-for="item in fleets" :value="item.login_name" :key="item.login_name">
              <Row>
                <Avatar :src="item.head_ico"/>
                <span style="float: right;">{{item.login_name}}</span>
              </Row>
            </Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
  import { getOwnFleet, getSysFleet, bindFleet, relieveFleet } from '@api/backEnd/station'

  export default {
    name: 'fleetList',
    data () {
      return {
        bindFleetModal: false,
        progresshow: false,
        progresscount: 0,
        progresstatus: 'active',
        progressspeed: 0,
        video_list: [],
        pageindex: 1,
        fleet_list: [],
        fleets: [],
        lodding: false,
        list_loadding: false,
        date: null,
        formItem: {
          loginName: ''
        },
        options: [],
        fleetColumn: [
          {
            title: '序号',
            width: 100,
            render: (h, params) => {
              let thisIndex = params.row._index + 1
              return (<span>{thisIndex}</span>)
            }
          },
          // {
          //   title: '序号',
          //   key: 'id'
          // },
          {
            title: '头像',
            key: 'head_ico',
            render: (h, params) => {
              return h('Avatar', {
                props: {
                  src: params.row.head_ico
                }
              })
            }
          },
          {
            title: '车队名称',
            key: 'login_name',
            ellipsis: 'false'
          },
          {
            title: '操作',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: (value, row) => {
                      relieveFleet(params.row.login_name).then(res => {
                        if (res.data.isSuccess === '1') {
                          this.$Message.info('解绑成功')
                          this.setInitPage(1)
                        }
                      })
                    }
                  }
                }, '解除绑定')
              ])
            }
          }
        ]
      }
    },
    computed: {},
    methods: {
      bindFleet () {
        this.bindFleetModal = true
        getSysFleet().then(res => {
          if (res.data.isSuccess === 1) {
            this.fleets = res.data.data.filter(item => item.bind_me !== 1)
          }
        })
      },
      submitBind () {
        bindFleet(this.formItem).then(res => {
          this.$Message.info('绑定成功')
          this.setInitPage(1)
        })
      },
      remove (index) {
        this.video_list.splice(index, 1)
      },
      setInitPage (page) {
        getOwnFleet().then(res => {
          if (res.data.isSuccess === 1) {
            this.fleet_list = res.data.data
          }
        })
        this.pageindex = page
      }
    },
    mounted () {
      const vue = this
      this.list_loadding = true
      setTimeout(function () {
        vue.list_loadding = false
      }, 2000)
      this.setInitPage(1)
    },
    components: {}
  }
</script>
<style scoped>

</style>
